[DEPLOY] v1.2.1: 아바타 렌더링 최적화, 채팅 멘션 UX 개선 및 CI/CD 안정화 #355
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Input 컴포넌트와 동일한 focus 색상 적용 - focus-visible:border-ring → focus-visible:border-brand-blue - focus-visible:ring-ring/50 → focus-visible:ring-brand-blue/50
SSR 의존성 제거를 위한 사전 작업 - 60개 Shape의 path 데이터와 clipPath 정보를 상수로 분리 - avvvatars-avatar.ts에서 재사용 가능하도록 구조화
번들 크기 감소 및 렌더링 성능 개선 - react-dom/server의 renderToStaticMarkup 제거 - shape-paths.ts의 정적 데이터를 직접 사용하여 SVG 문자열 생성 - Character/Shape 모드 모두 템플릿 리터럴로 직접 구성 - 불필요한 HTML 파싱 로직 제거
PopoverDescription, PopoverHeader, PopoverTitle export 추가 - Popover 관련 모든 export를 그룹화하여 가독성 개선 - 누락된 컴포넌트 export 추가
ChatInput의 복잡도 감소 및 재사용성 향상 - ChatMentionPopover 컴포넌트 신규 생성 - 파일 아이콘 렌더링 로직 포함 - 키보드 네비게이션 지원 (↑↓, Enter, Esc) - scrollIntoView로 선택 항목 자동 스크롤 - onMouseDown preventDefault로 Textarea 포커스 유지 - Popover 너비가 Textarea와 자동 동기화
- ChatIcon: 버튼 크기 증가(14→16), hover/active 애니메이션 추가 - ChatIcon: 읽지 않은 메시지 배지 위치 조정 - ChatPanel: 메시지 영역 select-none 제거 - Participants: 스크롤바 숨김 처리 - Participants: 레이아웃 flex 구조 개선
불필요한 빌드 트리거 제거 - pnpm-lock.yaml 변경을 트리거에서 제거 - base 파라미터 추가하여 정확한 diff 비교
수동 스크롤 숨김 CSS를 Radix UI ScrollArea로 교체 - 기존 수동 스크롤바 숨김 CSS 제거 (overflow-y-auto, -ms-overflow-style:none 등) - ScrollArea 컴포넌트로 교체하여 일관된 스크롤 UX 제공 - min-h-0 추가로 flex 컨테이너 내 스크롤 동작 보장
의존성 변경 감지를 위한 안전장치 추가 - client 트리거에 pnpm-lock.yaml 추가 - server 트리거에 pnpm-lock.yaml 추가 - package.json 변경 시 lock 파일 미업데이트 케이스 대응
코드 스타일 통일
[FE] UI 개선 및 아바타 렌더링 최적화
inaemin
changed the title
inaemin
added
FE
inaemin
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📋 작업 범위 (Scope)
🔗 관련 이슈 (Related Issue)
🛠️ 작업 내용 (Description)
⚡️ Performance (성능 최적화)
react-dom/server의존성을 제거하고, SVG path 데이터를 상수로 분리하여 문자열 조합 방식으로 변경했습니다. 이를 통해 번들 크기를 줄이고 SSR 의존성을 제거했습니다.♻️ Refactoring (코드 구조 개선)
ChatMentionPopover컴포넌트를 분리하여 복잡도를 낮추고 키보드 네비게이션(↑↓, Enter, Esc)을 지원하도록 개선했습니다.Radix UI ScrollArea로 교체하여 일관된 UX를 제공합니다.💄 Style (UI/UX 개선)
brand-blue로 통일하여 브랜드 아이덴티티를 강화했습니다.⚙️ DevOps (CI/CD)
pnpm-lock.yaml변경 트리거를 조정했습니다.📦 패키지 변경 사항 (Dependencies)
✅ 체크리스트 (Self Checklist)